/*========== 暗色主题变量 ==========*/
/* 当body标签的data-theme属性为dark时应用以下样式 */
body[data-theme=dark] {
  /* HSL颜色模式变量定义 */
  --first-color-second: hsl(var(--hue-color), 30%, 8%);    /* 次要主色调，深色背景 */
  --title-color: hsl(var(--hue-color), 8%, 95%);          /* 标题文字颜色，接近白色 */
  --text-color: hsl(var(--hue-color), 8%, 45%);           /* 正文文字颜色，灰色 */
  --text-color-light: hsl(var(--hue-color), 8%, 75%);     /* 浅色文字，用于次要信息 */
  --input-color: hsl(var(--hue-color), 29%, 16%);         /* 输入框背景色 */
  --body-color: hsl(var(--hue-color), 28%, 12%);          /* 页面背景色 */
  --container-color: hsl(var(--hue-color), 29%, 16%);     /* 容器背景色 */
  --scroll-bar-color: hsl(var(--hue-color), 12%, 48%);    /* 滚动条颜色 */
  --scroll-thumb-color: hsl(var(--hue-color), 12%, 36%);  /* 滚动条滑块颜色 */
}